import Home from '@/views/Home'
import Layout from '@/views/home/layout'
import Abstract from '@/views/Abstract'

export const routerMap = [
  {
    path: '/',
    name: 'home',
    component: Layout,
    children: [
      {
        path: 'home_page',
        name: 'home_page',
        meta: {
          hideInMenu: true
        },
        component: Home
      },
      {
        path: 'main',
        name: 'main',
        meta: {
          name: '首页',
          icon: 'ios-home'
        },
        component: () => import('@/views/home/main')
      },
      {
        path: '/grid',
        name: 'grid',
        meta: {
          name: '栅格',
          icon: 'md-grid'
        },
        component: () => import('@/views/grid/grid')
      },
      {
        path: '/tablePage',
        name: 'tablePage',
        meta: {
          name: '表格',
          icon: 'md-apps'
        },
        component: () => import('@/views/table/tablePage')
      },
      {
        path: 'assembly',
        name: 'assembly',
        meta: {
          name: '组件',
          icon: 'md-apps'
        },
        component: Abstract,
        children: [
          {
            path: '/count',
            name: 'count',
            meta: {
              name: '计数器',
              icon: 'md-alarm'
            },
            component: () => import('@/views/count/count')
          },
          {
            path: '/splitPane',
            name: 'splitPane',
            meta: {
              name: '页面拖拽',
              icon: 'ios-photos'
            },
            component: () => import('@/views/splitPane/splitPane')
          },
          {
            path: '/randerPage',
            name: 'randerPage',
            meta: {
              name: 'list组件',
              icon: 'ios-list'
            },
            component: () => import('@/views/randerPage/randerPage')
          },
          {
            path: '/menuPage',
            name: 'menuPage',
            meta: {
              name: '跳转菜单',
              icon: 'md-book'
            },
            component: () => import('@/views/menuPage/menuPage')
          }
        ]
      },
      {
        path: '/system',
        name: 'system',
        meta: {
          name: '系统管理',
          icon: 'md-settings'
        },
        component: Abstract,
        children: [
          {
            path: '/user',
            name: 'user',
            meta: {
              name: '用户管理',
              icon: 'md-people'
            },
            component: () => import('@/views/user/user')
          }
        ]
      },
      {
        path: '/base',
        name: 'base',
        meta: {
          name: '基础学习',
          icon: 'md-settings'
        },
        component: Abstract,
        children: [
          {
            path: '/about',
            name: 'about',
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            // 懒加载模式 只有执行时才会被加载
            component: () => import(/* webpackChunkName: "about" */ '@/views/About'),
            props: {
              food: 'banana'
            },
            meta: {
              name: '关于我们',
              icon: 'md-settings',
              // 路由源信息
              title: '关于我们'
            }
          },
          {
            path: '/argu/:name',
            name: 'argu',
            meta: {
              name: 'argu',
              icon: 'md-settings'
            },
            component: () => import('@/views/argu')
          },
          {
            path: '/parent',
            name: 'parent',
            meta: {
              name: '父子面',
              icon: 'md-settings'
            },
            component: () => import('@/views/parent'),
            children: [
              {
                path: 'child',
                name: 'child',
                meta: {
                  name: '子页面',
                  icon: 'md-settings'
                },
                component: () => import('@/views/child')
              }
            ]
          },
          {
            path: '/named_view',
            name: 'named_view',
            meta: {
              name: '多级嵌套',
              icon: 'md-settings'
            },
            components: {
              default: () => import('@/views/child'),
              email: () => import('@/views/email'),
              tel: () => import('@/views/tel')
            }
          },
          {
            path: '/arguTwo/:name',
            name: 'arguTwo',
            meta: {
              name: 'arguTwo',
              icon: 'md-settings'
            },
            component: () => import('@/views/arguTwo'),
            props: true
          },
          {
            path: '/storebus',
            name: 'storebus',
            meta: {
              name: 'storebus学习',
              icon: 'md-settings'
            },
            component: () => import('@/views/vuex/storebus')
          },
          {
            path: '/storevuex',
            name: 'storevuex',
            meta: {
              name: 'vuex学习',
              icon: 'md-settings'
            },
            component: () => import('@/views/vuex/storeVuex')
          },
          {
            path: '/storedatas',
            name: 'storedatas',
            meta: {
              name: 'store学习',
              icon: 'md-settings'
            },
            component: () => import('@/views/vuex/storeData')
          }
        ]
      }
    ]
    // props: route => ({
    //   food: route.query.food
    // })
    // 路由独享守卫 只在此路由内生效
    // beforeEnter: (to, from, next) => {
    // if (from === 'login') alert('这是从登录页来的')
    // else alert('这是从其他页面来的')
    // 最后必须执行 next 否则页面不会跳转
    // next()
    // }
  }
]

export const routes = [
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login/login')
  },
  {
    // *表示匹配所有 此配置需要放到路由最后 因为优先级原则为从上到下加载，当路由找不到后 最后执行此规则进行404页面
    path: '*',
    component: () => import('@/views/error_404')
  }
]
